﻿@page "/sidebar/sidebar-api"

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent


@inject IJSRuntime JsRuntime;

<div id="wrapper">
    <div class="col-lg-12 col-sm-12 col-md-12">
        <!-- sidebar element declaration -->
        <span id="hamburger" @onclick="@Show" class="@Hamburgerclass"></span>
        <SfSidebar HtmlAttributes="@HtmlAttribute" @ref="SidebarObj" CloseOnDocumentClick="@CloseOnDocumentClick" ShowBackdrop="@ShowBackdrop" Position="@Position" Type="@Type" @bind-IsOpen="SidebarToggle">
            <ChildContent>
                <div class="title-header">
                    <div style="display:inline-block"> Sidebar </div>
                    <span id="close" class="e-icons" @onclick="@Close"></span>
                </div>
                <div class="sub-title">
                    Place your primary content here.
                </div>
            </ChildContent>
        </SfSidebar>
        <!-- end of sidebar element -->
        <div class="list-group">
            <div class="list-group-item">
                <h2 class="title">Overview</h2>
                <br />
                <p> The Sidebar component is a collapsible side content placed along with the main content either in left or right side of the page. </p>
                <p> <br> </p>
                <h3 class="title">Options</h3>
                <br />
                <div class="inline-element responsive">
                    <!--Open or close the sidebar -->
                    <p class=" inline-element" style="width:70%">
                        <b>Toggle</b> - Toggles the Sidebar to be open or closed state.
                    </p>
                    <SfButton CssClass='e-info inline-element right' IsToggle="true" @onclick="ToggleBtnClick">Toggle</SfButton>
                    <br />
                    <br />
                    <!--Sidebar position -->
                    <p class=" inline-element" style="width:70%">
                        <b>Position</b> - Allows to place the sidebar in right or left side of the page.
                    </p>
                    <SfButton CssClass='e-info inline-element right' IsToggle="true" @ref="PositionElement" @onclick="PositionBtnClick" Content="@Content"></SfButton>
                    <br />
                    <br />
                    <!--Sidebar types -->
                    <p class="inline-element" style="width:70%"><b>Types </b> - Specifies the act of expanding or collapsing the sidebar with main content.</p>
                    <div class="inline-element right" style="width:80px">
                        <SfDropDownList TValue="string" TItem="typeData" @bind-Index="@index" PopupHeight="200px" CssClass="e-textbox right" DataSource="@Data">
                            <DropDownListFieldSettings Text="text" Value="text"></DropDownListFieldSettings>
                            <DropDownListEvents TValue="string" TItem="typeData" ValueChange="@OnChange"></DropDownListEvents>
                        </SfDropDownList>
                    </div>
                    <br />
                    <br />
                    <!--on document click -->
                    <p class=" inline-element" style="width:70%"><b>Closing on document click</b> - Allows to collapse / close the sidebar on document click.</p>
                    <SfButton @ref="DocumentclickElement" CssClass='e-info inline-element right' IsToggle="true" @onclick="DocBtnClick" Content="@DocContent"></SfButton>
                    <br />
                    <br />
                    <!--showbackdrop option -->
                    <p class=" inline-element" style="width:70%"><b>Backdrop</b> - Sets the backdrop over the main content area on open / expanded state. </p>
                    <SfButton @ref="BackDropElement" CssClass='e-info inline-element right' IsToggle="true" @onclick="BackBtnClick" Content="@Backcontent"></SfButton>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private int? index { get; set; } = 3;
    SfSidebar SidebarObj;
    SfButton PositionElement;
    SfButton DocumentclickElement;
    SfButton BackDropElement;
    @*SfDropDownList<typeData> dropValue;*@

    public bool CloseOnDocumentClick = false;
    public bool ShowBackdrop = false;
    public string Hamburgerclass = "e-icons menu";
    public string Content = "Right";
    public string Backcontent = "True";
    public string DocContent = "True";
    public SidebarPosition Position { get; set; } = SidebarPosition.Left;
    public SidebarType Type { get; set; } = SidebarType.Auto;
    public bool SidebarToggle = false;

    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
    {
        {"class", "default-sidebar" }
    };

    public class typeData
    {
        public string text { get; set; }
    }

    private List<typeData> Data { get; set; } = new List<typeData>
    {
        new typeData { text = "Push" },
        new typeData { text = "Over" },
        new typeData { text = "Slide" },
        new typeData { text = "Auto" }
    };

    private void ToggleBtnClick()
    {
        SidebarToggle = !SidebarToggle;
    }
    private void PositionBtnClick()
    {
        if (PositionElement.Content == "Right")
        {
            this.Content = "Left";
            this.Position = SidebarPosition.Right;
            this.Hamburgerclass = "e-icons menu e-rtl";
        }
        else
        {
            this.Content = "Right";
            this.Position = SidebarPosition.Left;
            this.Hamburgerclass = "e-icons menu";
        }
        this.StateHasChanged();
    }
    private void DocBtnClick()
    {
        if (DocumentclickElement.Content == "True")
        {
            this.DocContent = "False";
            this.CloseOnDocumentClick = true;
        }
        else
        {
            this.DocContent = "True";
            this.CloseOnDocumentClick = false;
        }
        this.StateHasChanged();
    }
    private void BackBtnClick()
    {
        if (this.BackDropElement.Content == "True")
        {
            this.Backcontent = "False";
            this.ShowBackdrop = true;
        }
        else
        {
            this.Backcontent = "True";
            this.ShowBackdrop = false;
        }
        this.StateHasChanged();
    }
    public void Show()
    {
        SidebarToggle = true;
    }
    public void Close()
    {
        SidebarToggle = false;
    }
    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, typeData> args)
    {
        if (args.Value.ToString() == "Over")
        {
            this.Type = SidebarType.Over;
        }
        else if (args.Value.ToString() == "Push")
        {
            this.Type = SidebarType.Push;
        }
        else if (args.Value.ToString() == "Slide")
        {
            this.Type = SidebarType.Slide;
        }
        else
        {
            this.Type = SidebarType.Auto;
        }
    }
}

<style>
    /* custom code start */
    .responsive {
        width: 80%;
    }
    .inline-element {
        display: inline-block;
    }

    .center-align {
        text-align: center;
        padding: 20px;
    }
    /* custom code end */
    .title {
        color: #000000;
        font-weight: 500;
        line-height: 24px;
        font-size: 18px;
        margin: 0px;
    }
    /* custom code start */
    body {
        font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
        margin: 0px;
        font-size: 14px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    /* End of content area styles */
    /* property content styles */
    /* custom code end */

    .inline-element.right.e-btn {
        color: white;
        border: none;
        width: 80px;
    }

    .right {
        float: right;
    }

    .list-group-item {
        border: none;
        padding: 60px 10px 10px 45px;
        font-size: 14px;
    }
    /* custom code start */
    .center {
        text-align: center;
        display: none;
        font-size: 13px;
        font-weight: 400;
        margin-top: 20px;
    }

    .sb-content-tab .center {
        display: block;
    }

    #sb-content-header {
        display: none
    }
    /* end of property content styles */
    /* custom code end */
    /* sidebar styles */

    .content {
        margin-bottom: 20px;
        overflow-y: auto;
    }

    #wrapper #close:before {
        content: "\e109";
    }

    .title-header {
        text-align: center;
        font-size: 18px;
        padding: 15px;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

    .e-sidebar .title-header #close {
        color: #fafafa;
        cursor: pointer;
        line-height: 25px;
    }

    .e-sidebar.e-left .title-header #close {
        float: right;
    }

    .e-sidebar.e-right .title-header #close {
        float: left;
    }

    .default-sidebar {
        background: #2196f3;
        color: #ffffff;
    }

    #hamburger.menu {
        font-size: 25px;
        cursor: pointer;
        float: left;
        line-height: 50px;
        position: absolute;
        z-index: 1000;
    }

        #hamburger.menu:before {
            content: '\e10d';
        }

        #hamburger.menu.e-rtl {
            position: relative;
            float: right;
        }

    #wrapper #close:before {
        content: "\e109";
    }

    .e-sidebar .title-header #close {
        color: #fafafa;
        cursor: pointer;
        line-height: 25px;
    }

    .e-sidebar.e-left .title-header #close {
        float: right;
    }

    .e-sidebar.e-right .title-header #close {
        float: left;
    }
    /* end of sidebar styles */


    /* custom generated icons styles */
    @@font-face {
        font-family: 'e-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    /* custom code start */
    .sf-new .sb-header,
    .sf-new .sb-bread-crumb,
    .sf-new #action-description,
    .sf-new .sb-action-description,
    .sf-new .e-tab-header,
    .sf-new .description-section,
    .sf-new #description-section,
    .sf-new #description,
    .sf-new #navigation-btn,
    .sf-new .sb-toolbar-splitter,
    .sf-new .sb-footer, .sf-new #left-sidebar, .sb-component-name {
        display: none
    }

    .sf-new .sb-right-pane.e-view {
        margin-left: 0px !important;
    }

    .sb-action-description.sb-rightpane-padding {
        padding-bottom: 0;
    }

    #content-tab.sb-content-tab {
        height: 100% !important;
    }

    .description-section {
        padding-top: 0;
    }

    .sf-new .container-fluid,
    .sf-new .container-fluid .control-section,
    #sidebar-section, description-section sb-rightpane-padding {
        padding: 0;
    }

    .sb-component-name.sb-rightpane-padding {
        margin-top: -56px;
    }

    .sb-right-pane.e-view {
        left: 0;
        padding-left: 0;
        padding-right: 0;
        top: 0;
        overflow-y: hidden;
    }

    .sb-desktop-wrapper {
        height: 100%;
    }

    .sb-component-name h1 {
        padding-top: 0;
    }

    .sf-new .sb-content.e-view {
        top: 0;
    }
    /* end of newTab support */
    /* custom code end */
</style>
